<template>

 
 <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">主页面</el-breadcrumb-item>
          <el-breadcrumb-item>药剂管理</el-breadcrumb-item>
          <el-breadcrumb-item>药剂信息查询</el-breadcrumb-item>
         </el-breadcrumb>
  <el-divider/>

  <el-descriptions title="药剂相关信息查询" :column="3"  border>

    <!-- 药品号 -->

    <el-descriptions-item label="药品号" >

      <el-input v-model="pill.pillId" style="width: 220px" placeholder="请输入药品号" clearable />

    </el-descriptions-item>


  </el-descriptions>

  <el-divider/>
  <!-- 添加按钮 -->

   <el-button type="primary" round @click="findPillAny"  >查询单个</el-button>
   <el-button type="primary" round @click="findPillAll" >查询所有</el-button>
     <el-divider/>

    <el-table :data="tableData" style="width: 100%" height="300" border>
    <el-table-column fixed prop="pillId" label="药品号" width="382" sortable/>
    <el-table-column prop="pillName" label="药品名称" width="390" />
    <el-table-column prop="function" label="药品作用" width="366" />

   
  </el-table>

   

</template>


<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';



const pill = ref({
 
  pillId:'',

  pillName:'',

  function:'',

});

 const tableData = ref([]);


function findPillAny() {

      axios.get(`http://localhost:8080/pill/findPillById?pillId=${pill.value.pillId}`)

        .then((response) => {

          // 处理单个对象的结果
            tableData.value = [response.data];

        })

        .catch((error) => {

          console.error(error);


        });

    }

function findPillAll() {

      axios.get(`http://localhost:8080/pill/findPillAll`)

        .then((response) => {

          // 后端返回的是一个包含多个对象的数组，直接赋值给tableData

          tableData.value = response.data;

        })

        .catch((error) => {

          console.error(error);

        });

    }

</script>